<!DOCTYPE html>
<html>
<head>
<title>WEEK5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

/* body 样式 */
body { 
    font-family: "微软雅黑", Helvetica, "微软雅黑", Arial, sans-serif; 
    font-size: 20px;
     line-height: 35px; 
     color: #737373; 
     margin: 10px 400px 100px 200px;
      } 

/* 标题 */
.header {
    padding: 80px;
    text-align: center;
    background: #000000;
    color: white;
}

/* 标题字体加大 */
.header h1 {
    font-size: 40px;
}


/* 列容器 */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* 创建两个列 */


/* 主要的内容区域 */
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
}

/* 图片 */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}



/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h1>个性化网络设计</h1>
</div>


<div class="row">
  
  <div class="main">
      <h2>网络交互设计</h2>
      <p>交互，即交流互动。在生活中，我们需要与他人进行交流互动，面对电脑、手机这类电子产品时，我们也同样需要与他们进行交互，比如打开一个网络页面为我们呈现的是什么样的，传递了哪些信息给我们，当我们点击某个按钮时，它又会回馈怎样的信息给用户。由此，交互设计亦是产品设计中一大重要环节，关乎用户使用产品的体验。</p>
      <p>玛格丽特·古尔德·斯图尔特在演讲中提到，作为一位网络设计者，既要大胆创新，相信设计需求，同时又要保持谦逊，倾听了解用户所真正需要的设计，给予用户足够的空间为设计留白。Facebook就曾为了更改点赞图标花费超过280小时，很多人都无法理解为什么一个小小图标的改变要花这么多时间，殊不知，尽管是一个小小的点赞按钮，需要考虑的设计细节也有很多，并且因为Facebook受众颇多，影响也十分大，容不得有一点的差错。这就是提醒我们在网络交互设计的时候需要谨慎小心，细心考虑每一个小细节。</p>
      <img src="http://image.woshipm.com/wp-files/2017/05/SfcaRRxuWQDltb45guRN.jpg!v.jpg"/>
      <br>
      <h2>如何改善选择？</h2>
      <p>在商店挑选商品时，我们常常因为选择过多而难以做出抉择，在互联网行业其实也是如此。作为设计者我们要如何改善顾客用户的这种选择困难体验呢？Sheena lyengar提倡到：</p>
     <ol>
         <li><b>精简选择。</b>因为少即是多。研究表明，人们更倾向于购买较少选择的商品。</li>
         <li><b>将选择具体化。</b>告知顾客/用户每项选择的具体情况以及其可能带来的影响和后果。</li>
         <li><b>将选择进行分类。</b>对选择分类能让顾客/用户更清晰做出决策，因为分类多了意味着选择的难度减小了。</li>
         <li><b>从简入繁。</b>尽量让选择变得简单避免繁杂。</li>
      <br>
      <h2>人性化设计</h2>
      <p>如何让用户拥有更好的体验如今已成为产品的一大竞争力，这就需要我们对用户有一个清晰的定位认知，并针对定位画像及逆行产品设计，使用户在使用产品过程中得到一定的满足和愉悦感，体现人文关怀。
人性化互联网产品例子：
</p>
<a href="https://www.pmcaff.com/discuss/index/489727600556096?pmc_param=1">众多互联网产品中，你见过最人性化的设计是什么？</a>
<a href="http://blog.sina.com.cn/s/blog_dae0ffa90102v1tc.html">网站建设的互联网产品人性化设计 </a>
      <br>
      <h4>参考链接</h4>
      <a href="https://www.iamue.com/36418">用通俗的方式告诉你什么是「交互设计」</a>
      <a href="http://www.woshipm.com/pd/745439.html">浅析app信息提示：提示的概念及人性化设计要点</a>

  </div>
</div>


</body>
</html>